<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/header.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<link rel="stylesheet" type="text/css"
	href="font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/list.css" />
</head>

<body>
	<div id="header"></div>

	<div class="main">
		<div class="container">
			<!-- 排序控制栏 -->
			<div class="sortbar mb20">
				<a href="#">综合排序</a> <a href="#">价格升序</a> <a href="#">价格降序</a> <input
					type="number" placeholder="价格" class="price-input"> <span>
					- </span> <input type="number" placeholder="价格" class="price-input">
				<button class="btn-ok">确定</button>
			</div>
			<!-- 商品列表区 -->
			<div class="module mb20">
				<ul id="product_list">
					<!-- 里面的数据这样渲染: -->
					<!-- <li>
							<img src="img/b899d9b82c4bc2710492a26af021d484.jpg">
							<p>商品名称</p>
							<p>商品简要描述</p>
							<p>价格</p>
						</li> -->
				</ul>
			</div>
			<!-- 分页区 -->
			<div class="pagination">
				<span>共 <span id="total_rows"></span> 条
				</span> <select class="h31" id="select_page_size">
					<option value="8">8条/页</option>
					<option value="16">16条/页</option>
					<option value="32">32条/页</option>
				</select>
				<ul id="page_no_list">
				</ul>
				<span>前往</span> <input id="jump" type="number" class="page-input h31">
				<span>页</span>
			</div>
		</div>
	</div>

	<div id="footer"></div>
	<script src="js/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		jQuery('#header').load('component/header.html')
		$('#footer').load('component/footer.html')
	</script>

	<script src="js/mock-min.js"></script>
	<script>
		Mock.mock("http://x.x.com", {
			"totalRows|100-10000": 1,
			"pageSize": 16,
			"pageNo|1-10": 1,
			"totalPages|10-100": 1,
			"list|8": [
				{
					"id|1-1000000": 0,
					"title": "@ctitle",
					"sellPoint": "@csentence",
					"price|10-1000": 1,
					"cover": Mock.Random.image("200x300", "#C41A16")
				}
			]
		});
	</script>

	<script>
		
		
		
		// 文档就绪时, 要做的事情
		$(document).ready(function(){
			
			// 发送ajax请求的函数
			function getProductList(pageNo, pageSize) {
				$.ajax({
					url: "http://localhost:8080/mall/product/list",
					type: "GET",
					data: {
						"pageNo": pageNo,
						"pageSize": pageSize
					},
					dataType: "json",
					success: function(data){
						currentPageNo = data.pageNo;
						show(data);
					}
				});
			}
			
			// 显示后端返回的数据
			function show(data) {
				// TODO 遍历data.list, 动态生成很多的li, 追加到 ul#product_list 内
				var ul = $('#product_list').empty();
				for (var product of data.list) {
					ul.append(
						$("<li>").append(
							$('<a>').attr('href', 'details.html?pid=' + product.pid)
							.append(
								$("<img>").attr("src", product.cover),
								$("<p>").html(product.title),
								$("<p>").html(product.sellPoint),
								$("<p>").html(product.price)
							)
						)
					);
				}
				// TODO 根据totalRows, pageNo, totalPage, 动态生成下方的分页区内容
				$('#total_rows').text(data.totalRows);
				const MIN_PAGENO = 1; // 最小页码必然是1
				var low = data.pageNo - 2; // 默认从当前页前2个页码开始显示
				var high = data.pageNo + 2; // 默认到当前页后2个页码结束
				if (low < MIN_PAGENO) low = MIN_PAGENO; // 处理下限页码超界
				if (high > data.totalPages) high = totalPages; // 处理上限页码超界
				// 清空页码容器ul
				var ulPagination = $('#page_no_list').empty();
				// 生成左滑链接
				$("<a>").text("<").appendTo(
					$("<li>").appendTo(ulPagination)
				);
			
				// 生成从low到high的页码
				for (var i = low; i <= high; i++) {
					let li = $('<li>');
					let a = $('<a>');
					a.text(i);
					if (i == data.pageNo) {
						a.css({
							"background-color": "#5D84E3",
							"color": "#FFFFFF"
						});
					}
					a.appendTo(li);
					li.appendTo(ulPagination);
				}
				// 生成右滑链接
				ulPagination.append(
					$("<li>")
						.append(
							$("<a>").text(">")
						)
				);
			}
			
			// 全局变量
			var currentPageNo = 1, pageSize = 8;
			
			// 页面加载完成时, 直接请求后端服务器, 得到第1页的数据
			getProductList(currentPageNo, pageSize);

			// 处理那些页码链接的点击事件
			// 这里的on很特殊, 因为里面的a标签是ajax success后动态生成的
			// 所以需要把click事件绑在容器上
			$("#page_no_list").on('click', 'a', function(){
				var pageNo = this.innerText;
				if(pageNo == '<') pageNo = currentPageNo - 1;
				if(pageNo == '>') pageNo = currentPageNo + 1;
				var pageSize = $('#select_page_size').val();
				getProductList(pageNo, pageSize);
			});
			
			// 当选择#select_page_size中的不同页码时
			$('#select_page_size').on('change', function(){
				var pageNo = 1;
				var pageSize = $('#select_page_size').val();
				getProductList(pageNo, pageSize);
			});
			
			// 当输入页码进行跳页时
			$('#jump').on('keyup', function(){
				if(event.key == 'Enter') {
					var pageNo = this.value;
					var pageSize = $('#select_page_size').val();
					getProductList(pageNo, pageSize);
				}
			});

		});
		
	</script>
</body>

</html>